<template>
    <el-dialog title="订单详情" :visible.sync="dialogVisible" width="50%">
        <div class="detail">
            <h1 class="total">订单总金额：<span>￥</span><i>{{ totalPrice }}</i></h1>
            <OrderItem v-for="item in orderObj.orderDetails" :key="item.id" :orderInfo="item" :orderObj="orderObj">
            </OrderItem>
        </div>

    </el-dialog>
</template>
<script>
import OrderItem from './order_item/index.vue'
export default {
    name: 'OrderDetailDialog',
    components: {
        OrderItem
    },
    mixins: [],
    props: ['orderObj'],
    data() {
        return {
            dialogVisible: false

        }
    },
    computed: {
        totalPrice() {
            return this.orderObj.orderDetails?.reduce((total, item) => {
                return total + (item.productPrice * item.productQty)
            }, 0);
        }
    },
    watch: {

    },
    mounted() {
        this.$bus.$on('DetailDialogShow', this.show)
    },
    methods: {
        show(value) {
            this.dialogVisible = value
        }
    }
};
</script>
<style lang='less' scoped>
.detail {
    padding: 20px 30px;

    .total {
        font-weight: 700;

        span {
            font-size: 12px;
            color: red;
            font-weight: 400;

        }

        i {
            font-size: 16px;
            color: red;
            font-weight: 400;
        }
    }
}
</style>